import '../index.css'
import store from './redux/store';
import ProfileSetting from './ProfileSetting'
// import { Provider, useSelector } from 'react-redux';
import { Provider, useSelector } from '../8_source/4_react_redux';

export default function () {
    // return <Provider store={store}><User /></Provider>
    return <Provider value={store}> <User /> </Provider>
}

function User() {
    return <>
        <Header />
        <Setting />
        <Summary />
    </>;
}

function Setting() {
    return (
        <div className='setting'>
            设置页面：
            <ProfileSetting />
            其它设置 <br />
            消息通知设置...

        </div>
    );
}

function Summary() {
    return <p>
        最顶层通过 Provide包裹，传递store <br />
        总结： <br />
        优点：<br />
        1. useSelector简直太好用了，巨大改进，都不需要订阅和销毁了<br />
        当然class组件中的connect(mapStateToProps, ...)也是可以的，也不用手动订阅和销毁，但是class组件过于复杂<br />
        2. useDispatch替换store.dispatch, 写法上倒是没有什么简化，只是更偏向hook, 收敛了store在最上层，内部都无需引用store<br />
        3. 他没有重写redux, 还是要搭配redux使用的，Provider=store
        缺点：<br />
        1. 感觉没缺点了，剩下的就是redux本身太麻烦了
    </p>
}


export function Header() {
    // 只有这两个状态更新，才会render, 但是还是要去订阅，销毁订阅
    // const [username, setUsername] = useSelector(store.getState().username);
    // const [unReadCount, setUnReadCount] = useSelector(store.getState().unReadCount);
    // useEffect(() => {
    //     const unsubscribe = store.subscribe(() => {
    //         setUsername(store.getState().username);
    //         setUnReadCount(store.getState().unReadCount);
    //     })
    //     return () => {
    //         unsubscribe();
    //     }
    // }, []);

    // useSelector会自动订阅，自动销毁, 也能自动更新
    const username = useSelector(state => state.username);
    const unReadCount = useSelector(state => state.unReadCount);

    return (
        <div className='header'>
            <span>{username}</span>

            <span className='un-read'>
                未读
                <div className='un-read-num'>{unReadCount}</div>
            </span>
        </div>
    )
}